// Copyright 2017 The go-ethereum Authors
// This file is part of the go-ethereum library.
//
// The go-ethereum library is free software: you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// The go-ethereum library is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Lesser General Public License for more details.
//
// You should have received a copy of the GNU Lesser General Public License
// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.

/*
We use html templates to handle simple but as informative as possible error pages.

To eliminate circular dependency in case of an error, we don't store error pages on swarm.
We can't save the error pages as html files on disk, or when deploying compiled binaries
they won't be found.

For this reason we resort to save the HTML error pages as strings, which then can be
parsed by Go's html/template package
*/
package http

//This returns the HTML for generic errors
func GetGenericErrorPage() string {
	page := `
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" ww="chrome=1">
    <meta name="description" content="Ethereum/Swarm error page">
		<link rel="shortcut icon" type="image/x-icon" href=""/>
    <style>
      html, body {
        margin: 0;
        padding 0;
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      content {
        flex: 1 0 auto;
        background-color: #FCEFD3;
      }
      footer {
        flex-shrink: 0;
        background-color: #ffa500;
        font-size: 1em;
        text-align: center;
        padding: 20px;
      }

      body, div, header, footer {
        margin: 0;
        padding: 0;
      }

      body {
        overflow: hidden;
      }

      .container {
        min-width: 100%;
        min-height: 100%;
        max-height: 100%;
      }

      header {
        display: flex;
        align-items: center;
        background-color: #ffa500;
        /* height: 20vh; */
        padding: 5px;
      }

      .header-left, .header-right {
        width: 20%;
      }

      .header-left {
        padding-left: 40px;
        float: left;
      }

      .header-right {
        padding-right: 40px;
        float: right;
      }

      .page-title {
        /* margin-top: 4.5vh; */
        text-align: center;
        float:      left;
        width:      60%;
        color:      white;
      }

      content-body {
        display: block;
        margin: 0 auto;
        /* width: 50%; */
        min-height: 60vh;
        max-height: 60vh;
        padding: 50px 20px;
        opacity: 0.6;
        background-color: #FCEFD3;
      }

      table {
        font-size: 1.2em;
        margin: 0 auto;
      }

      tr {
        height: 60px;
      }

      td {
        text-align: center;
      }

      .key {
        color: #111;
        font-weight: bold;
        width: 200px;
      }

      .value {
        color: red;
        font-weight: bold
      }

      footer {
        height: 20vh;
        background-color: #ffa500;
        font-size: 1em;
        text-align: center;
        padding: 20px;
      }

    </style>

    <title>Swarm::HTTP Error Page</title>
  </head>


  <body>
    <div class="container">

      <header>
        <div class="header-left">
          <img style="height:18vh;margin-left:40px" src=""/>
        </div>
        <div class="page-title">
          <h1>There was a problem serving the requested page</h1>
        </div>
        <div class="header-right">
          <div id="timestamp">{{.Timestamp}}</div>
        </div>
      </header>

      <content-body>
        <section>
          <table>
            <thead>
              <td style="height: 150px; font-size: 1.3em; color: black; font-weight: bold">
                Hmmmmm....Swarm was not able to serve your request!
              </td>
            </thead>
            <tbody>
              <tr>
                <td class="key">
                  Error message:
                </td>
              </tr>
              <tr>
                <td class="value">
                  {{.Msg}}
                </td>
              </tr>
              <tr>
                <td class="value">
                  {{.Details}}
                </td>
              </tr>

              <tr>
                <td class="key">
                  Error code:
                </td>
              </tr>
              <tr>
                <td class="value">
                  {{.Code}}
                </td>
              </tr>

            </tbody>
          </table>
        </section>
      </content-body>

      <footer>
        <p>
          Swarm: Serverless Hosting Incentivised Peer-To-Peer Storage And Content Distribution<br/>
          <a href="/bzz:/theswarm.eth">Swarm</a>
        </p>
      </footer>


    </div>
  </body>

</html>
`
	return page
}

//This returns the HTML for a 404 Not Found error
func GetNotFoundErrorPage() string {
	page := `
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" ww="chrome=1">
    <meta name="description" content="Ethereum/Swarm error page">
		<link rel="shortcut icon" type="image/x-icon" href=""/>
    <style>
      html, body {
        margin: 0;
        padding 0;
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      content {
        flex: 1 0 auto;
        background-color: #FCEFD3;
      }
      footer {
        flex-shrink: 0;
        background-color: #ffa500;
        font-size: 1em;
        text-align: center;
        padding: 20px;
      }

      header {
        display: flex;
        align-items: center;
        background-color: #ffa500;
        /* height: 20vh; */
        padding: 5px;
      }

      .header-left, .header-right {
        width: 20%;
      }

      .header-left {
        padding-left: 40px;
        float: left;
      }

      .header-right {
        padding-right: 40px;
        float: right;
      }

      .page-title {
        /* margin-top: 4.5vh; */
        text-align: center;
        float:      left;
        width:      60%;
        color:      white;
      }

      content-body {
        display: block;
        margin: 0 auto;
        padding: 50px 20px;
      }

      table {
        font-size: 1.2em;
        margin: 0 auto;
      }

      tr {
        height: 60px;
      }

      td {
        text-align: center;
      }

      .key {
        color: #111;
        font-weight: bold;
        width: 200px;
      }

      .value {
        color: red;
        font-weight: bold
      }

      footer {
        background-color: #ffa500;
        font-size: 1em;
        text-align: center;
        padding: 20px;
      }

    </style>

    <title>Swarm::404 HTTP Not Found</title>
  </head>


  <body>
    <content>

      <header>
        <div class="header-left">
          <img style="height:18vh;margin-left:40px" src=""/>
        </div>
        <div class="page-title">
          <h1>Resource Not Found</h1>
        </div>
        <div class="header-right">
          <div id="timestamp">{{.Timestamp}}</div>
        </div>
      </header>

      <content-body>
        <section>
          <table>
            <thead>
              <td style="height: 150px; font-size: 1.3em; color: black; font-weight: bold">
                Unfortunately, the resource you were trying to access could not be found on swarm.
              </td>
            </thead>
            <tbody>
              <tr>
                <td class="value">
                  {{.Msg}}
                </td>
              </tr>
              <tr>
                <td class="value">
                  {{.Details}}
                </td>
              </tr>


              <tr>
                <td class="key">
                  Error code:
                </td>
              </tr>
              <tr>
                <td class="value">
                  {{.Code}}
                </td>
              </tr>

            </tbody>
          </table>
        </section>
      </content-body>
    </content>

    <footer>
      <p>
        <a href="/bzz:/theswarm.eth">Swarm</a>: Serverless Hosting Incentivised peer-to-peer Storage and Content Distribution
      </p>
    </footer>

  </body>

</html>
`
	return page
}

//This returns the HTML for a page listing disambiguation options
//i.e. if user requested bzz:/<hash>/read and the manifest contains "readme.md" and "readinglist.txt",
//this page is returned with a clickable list the existing disambiguation links in the manifest
func GetMultipleChoicesErrorPage() string {
	page := `
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" ww="chrome=1">
    <meta name="description" content="Ethereum/Swarm multiple options page">
		<link rel="shortcut icon" type="image/x-icon" href=""/>
    <style>
      html, body {
        margin: 0;
        padding 0;
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      content {
        flex: 1 0 auto;
        background-color: #FCEFD3;
      }
      footer {
        flex-shrink: 0;
        background-color: #ffa500;
        font-size: 1em;
        text-align: center;
        padding: 20px;
      }

      header {
        display: flex;
        align-items: center;
        background-color: #ffa500;
        /* height: 20vh; */
        padding: 5px;
      }

      .header-left, .header-right {
        width: 20%;
      }

      .header-left {
        padding-left: 40px;
        float: left;
      }

      .header-right {
        padding-right: 40px;
        float: right;
      }

      .page-title {
        /* margin-top: 4.5vh; */
        text-align: center;
        float:      left;
        width:      60%;
        color:      white;
      }

      content-body {
        display: block;
        margin: 0 auto;
        padding: 50px 20px;
      }

      table {
        font-size: 1.2em;
        margin: 0 auto;
      }

      tr {
        height: 60px;
      }

      td {
        text-align: center;
      }

      .key {
        color: #111;
        font-weight: bold;
        width: 200px;
      }

      .value {
        color: red;
        font-weight: bold
      }

      footer {
        background-color: #ffa500;
        font-size: 1em;
        text-align: center;
        padding: 20px;
      }
    </style>

    <title>Swarm::HTTP Disambiguation Page</title>
  </head>


  <body>
    <content>

      <header>
        <div class="header-left">
          <img style="height:18vh;margin-left:40px" src=""/>
        </div>
        <div class="page-title">
          <h1>Swarm: disambiguation</h1>
        </div>
        <div class="header-right">
          <div id="timestamp">{{.Timestamp}}</div>
        </div>
      </header>

      <content-body>
        <section>
          <table>
            <thead>
              <td style="height: 150px; font-size: 1.3em; color: black; font-weight: bold">
                Your request may refer to {{ .Details}}.
              </td>
            </thead>
            <tbody>
              <tr>
                <td class="key">
                  Error code:
                </td>
              </tr>
              <tr>
                <td class="value">
                  {{.Code}}
                </td>
              </tr>

            </tbody>
          </table>
        </section>
      </content-body>
    </content>

    <footer>
      <p>
        <a href="/bzz:/theswarm.eth">Swarm</a>: Serverless Hosting Incentivised peer-to-peer Storage and Content Distribution
      </p>
    </footer>

  </body>

</html>
`
	return page
}
